<?php

?>
<div id="chart" style="width:800px; height:600px; margin:0 auto"></div>
<script type="text/javascript">
$(function() {
	$('#chart').highcharts({
		chart: {
			type: 'line',
			marginRight: 130,
            marginBottom: 25
		},
		title: {
			text: '<?php echo BUtils::T('special_report_title_lbl'); ?>',
			x: -20 //center
		},
		subtitle: {
			text: '<?php echo $date_range; ?>',
			x: -20
		},
		xAxis: {
			categories: <?php echo json_encode($date_array, true); ?>,
			type: 'datetime',
			tickInterval: 7
		},
		yAxis: {
			min: -5,
			title: {
				text: '<?php echo BUtils::T('special_report_yaxis_lbl'); ?>'
			},
			allowDecimals: false,
			plotLines: [{
				value: 10,
				width: 2,
				color: '#00aaee'
			}]
		},
		tooltip: {
			valueSuffix: ''
		},
		legend: {
			layout: 'vertical',
			align: 'right',
			verticalAlign: 'top',
			x: -10,
			y: 100,
			borderWidth: 0
		},
		series: [{
			name: 'Reach',
			data: <?php echo json_encode($reach_array, true); ?>
		}, {
			name: 'Clicks',
			data: <?php echo json_encode($clicks_array, true); ?>
		}, {
			name: 'Notifications',
			data: <?php echo json_encode($notifications_array, true); ?>
		}, {
			name: 'Redeems',
			data: <?php echo json_encode($redeems_array, true); ?>
		}]
	});
});
</script>